@import "./style";

.Mars3DModal {
	top: 40px;

	.ant-modal-close-x {
		color: white;
		height: 48px;
		width: 48px;
		line-height: 48px;
	}

	.ant-modal-header {
		background: #446efe;
		border-bottom: none;

		& > .ant-modal-title {
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			position: relative;
			height: 16px;
			line-height: 16px;
			text-indent: 15px;

			&::after {
				position: absolute;
				left: 0;
				top: 0;
				width: 4px;
				height: 16px;
				content: "";
				background: white;
			}
		}
	}

	.ant-modal-body {
		padding: 0;
		width: 100%;
		height: calc(100vh - 120px);

		.Mars3DScene {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;

			#mars3dView,
			.ant-spin-nested-loading > div > .ant-spin {
				width: 100%;
				height: calc(100vh - 120px);
				max-height: calc(100vh - 120px);
			}

			.getPosition {
				position: absolute;
				right: 16px;
				top: 16px;
				background: rgba(255, 255, 255, 0.35);
				backdrop-filter: blur(10px);
				border-radius: 8px;
				z-index: 5;
				padding: 16px;

				& > .label {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					margin-bottom: 16px;

					& > div:first-child {
						text-align: right;
						width: 80px;
						margin-right: 8px;
						font-size: 20px;
						font-family: YouSheBiaoTiHei;
						color: #262626;
					}
				}

				& > .button {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.tabList {
				position: absolute;
				top: 10px;
				left: 10px;
				width: auto;
				height: 40px;
				border-radius: 5px;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 0 2px white;

				& > div {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 150px;
					height: 100%;
					background: rgba(0, 0, 0, 0.5);
					color: white;
					cursor: pointer;
					font-size: 16px;
					box-shadow: 0 0 2px white;
					transition: all 0.15s;

					&.active {
						background: rgba(0, 0, 0, 1);
					}

					&:hover {
						background: rgba(0, 0, 0, 0.8);
					}

					& > span {
						margin-right: 5px;
					}
				}
			}

			.treeList {
				position: absolute;
				top: 65px;
				left: 10px;
				width: 340px;
				padding: 10px;
				background: rgba(0, 0, 0, 0.5);
				height: calc(100% - 80px);
				overflow-y: scroll;
				border-radius: 5px;
				box-shadow: 0 0 2px white;
				color: white;

				&::-webkit-scrollbar {
					display: none;
				}

				.scenesBase {
					width: 100%;
					overflow: hidden;

					.fromItem {
						.ant-form-vertical .ant-form-item .ant-form-item-control {
							width: 98%;
						}
					}
				}

				.ant-result {
					.ant-result-title,
					.ant-result-subtitle {
						color: white;
					}
				}

				.ElementBtnBox {
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					margin-bottom: 15px;
				}

				& > .basemaps,
				& > .layers {
					& > div:first-child {
						color: white;
						line-height: 40px;
					}

					& > div:last-child {
						margin-left: 15px;

						.ant-radio-wrapper {
							color: white;
						}

						.ant-checkbox-wrapper {
							color: white;
							margin-bottom: 7px;
						}

						.ant-checkbox-group {
							display: flex;
							flex-direction: column;
						}
					}
				}

				.treeBox {
					background: transparent;

					.TreeItem {
						width: 100%;
						display: flex;
						color: white;

						& > div:first-child {
							margin-right: 30px;
						}

						& > div:last-child {
							& > span {
								margin-right: 5px;
								cursor: pointer;
							}
						}
					}
				}

				.ant-tree-show-line .ant-tree-switcher {
					background: transparent;
					color: white;
				}

				.ant-tree .ant-tree-node-content-wrapper:hover {
					background: rgba(255, 255, 255, 0.3);
				}

				.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
					background: #446efe;
				}
			}

			.ModelBox {
				position: absolute;
				top: 65px;
				right: 10px;
				width: 340px;
				padding: 10px;
				background: rgba(0, 0, 0, 0.5);
				height: calc(100% - 80px);
				overflow-y: scroll;
				border-radius: 5px;
				box-shadow: 0 0 2px white;
				color: white;

				.ant-result {
					.ant-result-title,
					.ant-result-subtitle {
						color: white;
					}
				}

				& > .ModelBoxClose {
					height: 40px;
					font-size: 20px;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				&::-webkit-scrollbar {
					display: none;
				}

				.SingleLine {
					margin-bottom: 15px;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					&.LineFeed {
						align-items: flex-start;
						flex-direction: column;
					}

					& > div:first-child {
						width: 80px;
						color: white;
					}

					& > div:last-child {
						width: 100%;
						flex: 1;

						.ant-slider {
							margin: 0 !important;
						}
					}
				}

				.ant-input-number {
					width: 100%;
				}

				.ant-tabs-tab {
					color: white;
					font-size: 16px;
				}

				& > .options {
					display: flex;
					align-items: center;
					justify-content: space-evenly;
				}
			}

			.ElementOptions,
			.ElementDetailOptions {
				position: absolute;
				right: 10px;
				top: 65px;
				width: 300px;
				padding: 10px;
				background: rgba(0, 0, 0, 0.5);
				height: calc(100% - 80px);
				overflow-y: scroll;
				border-radius: 5px;
				box-shadow: 0 0 2px white;
				color: white;

				&::-webkit-scrollbar {
					display: none;
				}

				.ModelBoxClose {
					height: 40px;
					font-size: 20px;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.formBox {
					color: white;
				}
			}

			.Hidden {
				display: none;
			}

			.ant-form-item {
				margin-bottom: 10px;
			}

			.fromItem {
				label {
					color: white;
				}

				.BtnList {
					display: flex;
					align-items: center;
					justify-content: space-evenly;
				}

				.ant-form-item-control {
					margin-left: 10px;
				}

				.centerImage {
					width: 100%;
					height: 140px;
					border-radius: 5px;
					overflow: hidden;
					position: relative;
					box-shadow: inset 27px 27px 54px #d9d9d9,
						inset -27px -27px 54px #ffffff;

					& > img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					& > div {
						position: absolute;
						top: 0;
						right: 0;
						height: 25px;
						width: 25px;
						z-index: 1;
						background: rgba(0, 0, 0, 0.8);
						font-size: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 0 0 0 8px;
						cursor: pointer;
						color: white;
					}
				}

				.saveCenter {
					width: 100%;
					height: 140px;
					border-radius: 5px;
					background: white;
					box-shadow: inset 27px 27px 54px #d9d9d9,
						inset -27px -27px 54px #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22px;
				}

				.selectImage {
					background: yellow;
				}
			}

			.submitBox {
				.ant-form-item-control-input-content {
					display: flex;
					justify-content: space-evenly;
				}
			}
		}

		.Mars3DBox {
			width: 100%;
			height: 100%;
			overflow: hidden;
			position: relative;

			.style {
				position: absolute;
				width: 200px;
				top: 15px;
				left: 15px;
				bottom: 15px;
				z-index: 1;
				overflow-y: scroll;
				padding: 5px;
				background-color: rgba(0, 0, 0, 0.25);
				border-radius: 5px;
				border: 1px solid #262626;

				&::-webkit-scrollbar {
					display: none;
				}

				& > .title {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 25px;
					font-size: 20px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
				}

				& > .item {
					width: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: center;
					flex-direction: column;

					& > div {
						width: 100%;
						color: #ffffff;

						&:first-child {
							line-height: 30px;
							font-size: 15px;
							font-family: PingFang SC;
							font-weight: bold;
						}

						&:last-child {
							& > .submit {
								background: white;
								border-radius: 2px;
								height: 120px;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 15px;
								font-family: PingFang SC;
								font-weight: bold;
								color: #262626;
								cursor: pointer;
							}

							& > .replace {
								width: 100%;
								position: relative;
								overflow: hidden;

								& > img {
									width: 100%;
									height: 120px;
									object-fit: cover;
									border-radius: 2px;
									border: 1px solid;
								}

								& > div {
									position: absolute;
									top: 0;
									right: 0;
									height: 25px;
									width: 25px;
									z-index: 1;
									background: rgba(0, 0, 0, 0.8);
									font-size: 16px;
									display: flex;
									align-items: center;
									justify-content: center;
									border-radius: 0 0 0 8px;
									cursor: pointer;
								}
							}

							& > .saveCenter {
								cursor: pointer;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							& > .centerBox {
								padding: 5px;

								& > div:first-child {
									& > div {
										cursor: pointer;
										display: flex;
										align-items: center;
										justify-content: space-between;
									}
								}

								& > div:last-child {
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}
					}
				}
			}

			.list {
				position: absolute;
				width: 200px;
				top: 50px;
				right: 15px;
				bottom: 15px;
				z-index: 1;
				overflow-y: scroll;
				padding: 5px;
				background-color: rgba(0, 0, 0, 0.25);
				border-radius: 5px;
				border: 1px solid #262626;

				&::-webkit-scrollbar {
					display: none;
				}

				& > div {
					cursor: pointer;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 30px;
					font-size: 20px;
					font-family: PingFang SC;
					font-weight: bold;
					color: #ffffff;
				}
			}

			.add {
				position: absolute;
				right: 15px;
				bottom: 15px;
				z-index: 1;

				&.show {
					bottom: 70px;
				}
			}

			#mars3dView,
			.ant-spin-nested-loading > div > .ant-spin {
				width: 100%;
				height: calc(100vh - 220px);
				max-height: calc(100vh - 220px);
			}

			& > .mapOptions {
				position: absolute;
				left: 15px;
				top: 15px;
				width: 250px;
				height: calc(100% - 30px);
				overflow-y: scroll;
				padding: 5px;
				border-radius: 5px;
				background: rgba(0, 0, 0, 0.4);
				color: white;
				z-index: 1;

				& > .title {
					text-align: center;
					height: 40px;
					font-size: 20px;
					font-weight: bold;
					font-family: PingFangSC-Medium, PingFang SC;
					color: white;
					line-height: 40px;
				}

				&::-webkit-scrollbar {
					display: none;
				}

				.ant-collapse > .ant-collapse-item > .ant-collapse-header {
					color: white;
					padding: 10px;
				}

				.ant-collapse-content-box {
					padding: 0 15px;
				}

				.optionsBox {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					width: 100%;
					min-height: 40px;
					line-height: 30px;

					& > div:first-child {
						width: 80px;
						color: white;
					}

					& > div:last-child {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.ant-input-number-handler,
						.ant-select-arrow,
						.ant-input-number,
						.ant-input,
						.ant-select:not(.ant-select-customize-input) .ant-select-selector {
							color: white;
						}

						.ant-input-number,
						.ant-input-number-handler-wrap,
						.ant-input,
						.ant-select:not(.ant-select-customize-input) .ant-select-selector {
							background: transparent;
						}
					}
				}
			}
		}
	}
}

.styleList {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	max-height: 100%;
	overflow-y: scroll;

	&::-webkit-scrollbar {
		display: none;
	}

	& > img {
		width: 49%;
		height: 90px;
		object-fit: cover;
		margin-bottom: 5px;
		cursor: pointer;
	}
}

.ElementsDrawer {
	.ant-drawer-header {
		background: #446efe;

		.ant-drawer-title {
			color: white;
		}
	}

	.ElementsBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		& > img {
			width: 48%;
			height: 100px;
			margin-bottom: 14px;
		}
	}
}

.DrawLoading {
	width: 100%;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.ModelSelect {
	position: absolute;
	left: 24px;
	top: 54px;
	width: calc(100% - 48px);
	height: 60px;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ModelListBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 30px;

	& > div {
		width: 100px;
		height: 130px;
		box-sizing: border-box;
		border: 1px solid white;
		margin-bottom: 10px;

		& > img {
			width: 98px;
			height: 98px;
		}

		& > div {
			width: 100%;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			color: #262626;
		}
	}
}

.ant-drawer-body::-webkit-scrollbar {
	display: none;
}
